<!-- 商品规格选择弹窗组件 -->
<template>
    <!-- 底部弹出的弹窗组件 -->
    <nut-popup position="bottom" :visible="showSpecPopup" @update:visible="updateVisible" round>
        <!-- 弹窗内容容器 -->
        <view class="spec-popup">
            <!-- 顶部 -->
            <view class="header" :style="{}">
                <view :style="{ display: 'flex', justifyContent: 'space-between' }">
                    <!-- 关闭按钮 -->
                    <text class="close" @tap="closePopup">×</text>
                    <view>确认订单</view>
                    <text></text>
                </view>
                <view>
                    <!-- 收货地址 -->
                    <view class="address"  :style="{display: 'flex',justifyContent:'space-between'}"  @tap="tiaozhuan" v-if="!showaddress">
                        <view>收货地址</view>
                        <view> ></view>
                    </view>
                    <view class="address" v-else @tap="tiaozhuan">
                        <view>{{ addressList.userName }} {{ addressList.phone }}</view>
                        <view>{{ addressList.address1 }} {{ addressList.address2 }}</view>
                    </view>
                    <!-- <view class="address" :style="{display: 'flex',justifyContent:'space-between'}" @tap="tiaozhuan">
                        <view v-if="Object.keys(addressList.value).length === 0">请选择收货地址</view>
                        <view v-else>{{ addressList.value.userName }} {{ addressList.value.phone }}<br/>{{ addressList.value.address1 }} {{ addressList.value.address2 }}</view>
                        <view> ></view>
                    </view> -->
                </view>
            </view>

            <!-- 商品卡片 -->
            <view :style="{ padding: '20rpx', background: '#fff' }">
                <!-- 弹窗头部，包含商品信息 -->
                <view class="popup-header">
                    <!-- 商品基本信息 -->
                    <view class="goods-info">
                        <!-- 商品缩略图 -->
                        <image :src="goodsImages[0]" class="thumb"></image>
                        <!-- 商品描述 -->
                        <view calss="goods-desc">
                            <view class="title">{{ title }}</view>
                            <view class="text" :style="{ margin: '20rpx 0' }">先用后付 7天无理由 运费险</view>
                            <view class="price">¥{{ price }}起 券后价{{ price + 20 }}</view>
                        </view>
                    </view>
                </view>

                <!-- 规格选择列表 -->
                <view class="spec-list">
                    <!-- 规格标题 -->
                    <view class="spec-title">颜色</view>
                    <!-- 规格选项 -->
                    <view class="spec-items">
                        <!-- 循环渲染规格选项 -->
                        <text class="spec-item" :class="{ active: selectedSpec === item }"
                            v-for="(item, index) in specs" :key="index" @tap="selectSpec(item)">{{ item.name }}</text>
                    </view>
                </view>

                <!-- 弹窗中部，包含数量选择、配送运费，优惠价格，备注-->
                <view class="popup-central">
                    <!-- 数量 -->
                    <view class="quantity">
                        <!-- 数量标签 -->
                        <text>数量</text>
                        <!-- 数量控制按钮 -->
                        <view class="quantity-control" :style="{}">
                            <view>限购5瓶</view>
                            <text class="minus" :class="{ disabled: quantity <= 1 }" @tap="decreaseQuantity" :style="{}">-</text>
                            <!-- 当前选择数量 -->
                            <text class="number" :style="{margin: '0 10rpx'}">{{ quantity }}</text>
                            <text class="plus" @tap="increaseQuantity">+</text>
                        </view>
                    </view>

                    <!-- 配送 -->
                    <view class="quantity" :style="{marginTop: '20rpx'}">
                        <!-- 配送标签 -->
                        <text>配送</text>
                        <!-- 配送运费 -->
                        <view class="" :style="{}">
                            <view>免运费</view>
                        </view>
                    </view>

                    <!-- 优惠 -->
                    <view class="quantity" :style="{margin: '15rpx 0'}">
                        <!-- 优惠标签 -->
                        <text>优惠</text>
                        <!-- 优惠价格 -->
                        <view class="" :style="{}">
                            <view>-￥20.00  ></view>
                        </view>
                    </view>

                    <!-- 备注 -->
                     <view class="quantity" :style="{marginBottom: '200rpx'}">
                        <text>备注</text>
                        <!-- 优惠价格 -->
                        <view :style="{}">
                            <view>选填，建议先与商家协商一致</view>
                        </view>
                    </view>

                    <!-- 底部价格计算和提交按钮 -->
                     <view class="quantity">
                        <view>
                            <view :style="{color: '#ff0000'}">￥236</view>
                            <text>免运费，共减￥20.00</text>
                        </view>
                        <view class="btn"><button type="submit" :style="{background: '#ff6146', color: '#fefef'}">提交订单</button></view>
                    </view>
                </view>
            </view>
        </view>
        
    </nut-popup>
</template>

<script lang="ts" setup>

import http from "@/utils/http";

import Taro, { useDidShow} from "@tarojs/taro";

import { onMounted, ref } from "vue";

import address  from './address.vue'


/**
 * 组件接收的属性类型定义
 */
const props = defineProps<{
    goodsImages: string[];
    price: number;
    specs: any[];
    selectedSpec: any;
    showSpecPopup: boolean;
    title: string;
}>();

// const selectedSpec = ref({});


/**
 * 定义组件触发的事件类型
 */
const emit = defineEmits<{
    (e: "update:showSpecPopup", value: boolean): void;
    (e: "select-spec", spec: string): void;
    (e: "add-to-cart"): void;
    (e: "buy-now"): void;
}>();


/**
 * 更新弹窗显示状态
 * @param value - 弹窗显示状态，true 为显示，false 为隐藏
 */
const updateVisible = (value: boolean) => {
    console.log('updateVisible called with value:', value); emit("update:showSpecPopup", value);
};


/**
 * 商品数量，初始值为 1
 */
const quantity = ref(1);


/**
 * 关闭弹窗
 */
const closePopup = () => {
    emit("update:showSpecPopup", false);
};


/**
 * 选择商品规格
 * @param spec - 选中的规格对象
 */
const selectSpec = (spec: any) => {
    console.log("Selected spec:", spec);
    // selectedSpec.value = spec;
    emit("select-spec", spec);
};


/**
 * 减少商品数量，数量最小为 1
 */
const decreaseQuantity = () => {
    if (quantity.value > 1) {
        quantity.value--;
    }
};


/**
 * 增加商品数量
 */
const increaseQuantity = () => {
    quantity.value++;
};


/**
 * 将商品添加到购物车
 */
const addToCart = () => {
    emit("add-to-cart");
    http
        .postQuery("/api/shoppingCart/add", {
            specificationsId: props.selectedSpec.id,
            amount: quantity.value,
        })
        .then((res) => {
            console.log("添加购物车 === ", res);
            if (res.code == 0) {
                Taro.showToast({
                    title: "添加成功",
                    icon: "success",
                });
            } else {
                Taro.showToast({
                    title: "添加失败",
                    icon: "none",
                });
            }
        });
    closePopup();
};


/**
 * 立即购买商品
 */
// const buyNow = () => {
//   emit("buy-now");
//   closePopup();
//   Taro.setStorageSync("goods", [
//     {
//       image: props.goodsImages[0],
//       goodsName: props.title,
//       specName: props.selectedSpec.name,
//       specId: props.selectedSpec.id,
//       price: props.price,
//       amount: quantity.value,
//     },
//   ]);
//   Taro.navigateTo({
//     url: "/pages-detail/checkout/checkout?buy=1",
//   });
// };

// 接受从address.vue 传递的地址数据
const addressList = ref({})
// 显示地址
const showaddress = ref(false)

useDidShow(() => {
  const addressData = Taro.getStorageSync('address');
  if (addressData) {
    addressList.value = addressData.address;
  }
})

// 跳转收货地址页面
const tiaozhuan  = () => {
    Taro.navigateTo({
        url: "/pages-detail/my/address",
        success() {
            showaddress.value = true  
        }
    })
}


</script>

<!-- 组件样式 -->
<style lang="scss">
/**
 * 商品规格选择弹窗样式
 */
.spec-popup {
    height: 1200rpx;
    background: #ccc;
    border-radius: 24rpx 24rpx 0 0;

    .header {
        background: #fff;
        height: 150rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        .address {
            margin-top: 30rpx;
        }
    }

    /**
   * 弹窗头部样式
   */
    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        /**
     * 商品信息样式
     */
        .goods-info {
            display: flex;

            /**
       * 商品缩略图样式
       */
            .thumb {
                width: 180rpx;
                height: 180rpx;
                border-radius: 12rpx;
                margin-right: 20rpx;
                background: #eee;
            }

            /**
       * 商品信息详情样式
       */
            .info {

                /**
         * 商品价格样式
         */
                .price {
                    font-size: 36rpx;
                    color: #ff0000;
                    font-weight: bold;
                }

                /**
         * 已选规格样式
         */
                .selected {
                    font-size: 26rpx;
                    color: #999;
                    margin-top: 10rpx;
                }
            }
        }

        /**
     * 关闭按钮样式
     */
        .close {
            font-size: 48rpx;
            color: #999;
            line-height: 1;
            padding: 10rpx;
        }
    }

    /**
   * 规格列表样式
   */
    .spec-list {
        margin-bottom: 40rpx;

        /**
     * 规格标题样式
     */
        .spec-title {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 20rpx;
        }

        /**
     * 规格选项样式
     */
        .spec-items {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;

            /**
       * 单个规格选项样式
       */
            .spec-item {
                padding: 16rpx 40rpx;
                background: #f7f7f7;
                border-radius: 8rpx;
                font-size: 26rpx;
                color: #333;

                &.active {
                    color: #ff0000;
                    background: #fff0f0;
                }
            }
        }
    }

    /**
   * 弹窗底部样式
   */
    .popup-central {
        .quantity {
            display: flex;
            justify-content: space-between;

            .quantity-control{
                width: 300rpx;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
